<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../lib/vue.js"></script>
  <script src="../lib/vue-router.js"></script>
  <script src="../lib/jquery.js"></script>
  <style>
     .box1{
          width:60%;
          border:1px solid darkorchid;
          border-radius: 10px;
          padding:20px;
        }
        .router-link-exact-active{
          color:deeppink;
          border:1px solid deepskyblue;
          padding:5px;
          border-radius: 5px;
          background: darkslateblue;
        }
        .box2{
          width:60%;
          border:1px solid darkorange;
          border-radius: 10px;
          padding:20px;
        }
  </style>
</head>
<body>
    <div id="app">
       <h2> {{title }}</h2>
       <myhead></myhead>
       <hr>
      <!-- 5.路由出口 加载路由组件的地方  -->
      <router-view class="box1"></router-view>

      <!-- 6. 路由导航  -->
      

    </div>

    <template id="head">
      <header>
        WH2110-DAYDAYUP
      </header>
    </template>

    <template id="main">
      <div>
        <h2> main  - mian -  微信主视图 </h2>

        <router-view class="box2"></router-view>
        <myfoot></myfoot>
      </div>
    </template>
    <template id="wechat">
      <div>
        <h2> wechat  - wechat -  微信聊天 </h2>
      </div>
    </template>
    <template id="contact">
      <div>
        <h2> contact  - contact -  通讯录 </h2>
        <p v-for="(l,i) in songers" :key="i" >
          <router-link :to="{name:'detail',query:{...l}}"  > {{l.name}}</router-link>
        </p>
        
      </div>
    </template>
    <template id="find">
      <div>
        <h2> find  - find -  朋友圈 </h2>
      </div>
    </template>
    <template id="mine">
      <div>
        <h2> mine  - mine -  我的信息 </h2>
      </div>
    </template>
    <template id="notfound">
      <div>
          <h2>notfound - notfound - 404 </h2>
      </div>
    </template>
    <template id="detail">
      <div>
        <h2>联系人 --- detail  - <button @click="$router.go(-1)">返回</button> </h2>
        <h2>name == {{$route.query.name}}</h2>
        <img width="300" height="300" :src="$route.query.picUrl" alt="">

      </div>
    </template>
    <template id="foot">
        <footer>
            <router-link :to="{name:l.name}" v-for="(l,i) in footlist" :key="i">
               {{l.text}}
            </router-link>
        </footer>
    </template>


    <script>
      // 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
      Vue.component("myhead",{
        template:"#head"
      })
      Vue.component("myfoot",{
        template:"#foot",
        data(){
          return {
              footlist:[
                {path:'wechat',name:'wechat',text:"微信"},
                {path:'contact',name:'contact',text:"通讯录"},
                {path:'find',name:'find',text:"发现"},
                {path:'mine',name:'mine',text:"我的"},
              ] 
          }
        }
      })
      // 1. 定义路由组件
      const Main = {
        template:"#main"
      }
      const Wechat = {
        template:"#wechat"
      }
      const Contact = {
        template:"#contact",
        data(){
          return {
            songers:[]
          }
        },
        mounted(){
          $.ajax({
            type:"get",
            url:"http://47.104.209.44:3333/artist/list",
            dataType:"json",
            success:res=>{
              console.log(res)
              this.songers = res.artists
            }
          })
        }
      }
      const Find = {
        template:"#find"
      }
      const Mine = {
        template:"#mine",
        beforeRouteEnter(to,from,next){
          console.log('beforeRouteEnter 进入当前路由组件')

          next()
        },
        beforeRouteUpdate(to,from,next){
          console.log('beforeRouteUpdate 更新当前路由组件')
          next()
        },
        beforeRouteLeave (to, from, next) {
          console.log('beforeRouteLeave 离开当前路由组件')
          next()
        }
      }
      const NotFound  = {
        template:"#notfound"
      }

      const Detail  = {
        template:"#detail"
      }

      // 2. 定义路由 (定义路由里面组件和地址路径的映射关系)
    //   routes路由选项对象
      const routes = [
          {
            path:"/",
            redirect:"/main"
          },
          {
            path:"/main",
            name:'main',
            component:Main,
            redirect:"/main/wechat",
            children:[
              {path:'wechat',name:'wechat',component:Wechat},
              {path:'contact',name:'contact',component:Contact},
              {path:'find',name:'find',component:Find},
              {path:'mine',name:'mine',component:Mine},
            ]
          },
          {
            path:"/detail",
            name:"detail",
            component:Detail,
            beforeEnter:(to,from,next)=>{   // 路由独享的守卫
              console.log("beforeEnter  某个路由独享的守卫  "   )
              next()
            }
          },
          {
            path:"/404",
            name:'notFound',
            component:NotFound
          },
          {
            path:"*",
            redirect:{name:'notFound'}
          }
      ]
      // 3. 创建路由 
      const router = new VueRouter({
        routes,
        base:"",
        mode:"hash",
        scrollBehavior:()=>{   // 监听路由页面的滚动行为 

        }
      })

      router.beforeEach((to,from,next)=>{
        console.log(to)
        console.log(from)
        console.log('beforeEach 全局前置守卫')
        next()   // next(false)
      })
      router.afterEach((to,from)=>{
        console.log('afterEach 已经进入当前的路由')
      })
      // 4. 挂载到根实例                  
      const vm = new Vue({
        router ,
        el:"#app",
        data:{
          title:"Vue 路由 - 路由嵌套 + 路由守卫  "
        },
        watch:{
          '$route':function(to,from){
            // console.log(to)   // 即将进入的路由
            // console.log(from) // 即将离开的路由 
          }
        },
        mounted(){
          console.log(this.$router)  // router 路由对象  负责路由切换 重定向
          console.log(this.$route)   // 路由信息对象  记录当前激活路由的相关数据信息  (参数 params query meta )
        }
      })
    </script>
    <!-- 
        嵌套路由  路由嵌套组件  
        你有多少层嵌套就写多少个 router-view

        配置简单 路由 

        路由守卫   阻止你进入或者离开当前路由 

        用来判断时候可以进入或者离开当前路由  

        路由导航守卫    分三种   
        a.  全局前置守卫  router.beforeEach(to,from,next)
            全局后置守卫  router.afterEach(to,from)

        b.  路由独享的守卫  beforeEnter(to,from,next)  进入当前路由之前触发 

        c.  路由组件内直接定义以下路由导航守卫  component
            beforeRouteEnter    进入这个组件之前
            beforeRouteUpdate   组件数据更新  
            beforeRouteLeave    离开这个组件之前  
  -->
</body>
</html>